<template>
<CommonCart title="累计用户数" :value="userToday">
    <template>
        <v-chart :options="getOptions()" />
    </template>

    <template #footer>
        <div class="total-users-footer">
            <span >日同比 </span>
            <span class="emphasis">{{userGrowthLastDay}}</span>
            <div class="increase"></div>
            <span  class="month">月同比 </span>
            <span class="emphasis">{{userGrowthLastMonth}} </span>
            <div class="decrease"></div>
        </div>
     </template>
</CommonCart>
</template>

<script>
import commonCartMixin from '../../mixins/commonCartMixin'
import commonDataMixin from '../../mixins/commonDataMixin'
export default {
    name: 'TotalUsers',
    mixins: [commonCartMixin,commonDataMixin],
    methods: {
      getOptions () {
        return {
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: {
            show: false,
            type: 'category'
          },
          series: [
            {
              name: '上月平台用户数',
              type: 'bar',
              stack: '总量',
              data: [this.userLastMonth],
              barWidth: 10,
              itemStyle: {
                color: '#45c946'
              }
            },
            {
              name: '今日平台用户数',
              type: 'bar',
              stack: '总量',
              data: [this.userTodayNumber],
              itemStyle: {
                color: '#eee'
              }
            },
            {
              type: 'custom',
              stack: '总量',
              data: [this.userLastMonth],
              renderItem: (params, api) => {
                const value = api.value(0)
                const endPoint = api.coord([value, 0])
                return {
                  type: 'group',
                  position: endPoint,
                  children: [{
                    type: 'path',
                    shape: {
                      d: 'M325.456896 862.27968 M882.05824 862.27968 M236.027904 877.161472 M960.132096 877.161472 M63.683584 788.737024 M958.46912 788.737024 M64.77824 858.791936 M163.396608 289.168384c-40.577024 0-66.526208 54.183936-35.44064 85.25824L477.217792 723.704832c20.031488 20.031488 49.82272 20.031488 69.853184 0l349.274112-349.278208c30.30528-30.294016 6.677504-85.25824-34.927616-85.25824L163.396608 289.168384z M959.522816 858.791936',
                      x: -5,
                      y: -20,
                      width: 10,
                      height: 10,
                      layout: 'cover'
                    },
                    style: {
                      fill: '#45c946'
                    }
                  },
                    {
                      type: 'path',
                      shape: {
                        d: 'M325.456896 862.27968 M882.05824 862.27968 M236.027904 877.161472 M960.132096 877.161472 M64.134144 845.290496 M131.974144 648.752128c-30.418944 30.430208-6.474752 84.301824 34.917376 84.301824L858.258432 733.053952c42.899456 0 65.325056-53.85216 34.916352-84.301824L547.487744 302.569472c-19.930112-19.974144-49.374208-19.95264-69.327872 0L131.974144 648.752128z M960.51712 845.290496',
                        x: -5,
                        y: 10,
                        width: 10,
                        height: 10,
                        layout: 'cover'
                      },
                      style: {
                        fill: '#45c946'
                      }
                    }
                  ]
                }
              }
            }
          ],
          grid: {
            top: 0,
            left: 0,
            bottom: 0,
            right: 0

          }
        }
      }
    }
}
</script>

<style  lang='scss' scoped>
.total-users-footer{
display: flex;
align-items: center;
}
.month{
    margin-left: 10px;
}

</style>
